<template>
	<z-paging ref="paging" :fixed="true" refresher-only @onRefresh="getData" refresher-background="#1E62FC"
		:use-refresher-status-bar-placeholder="true" refresher-theme-style="white">
		<Notice></Notice>
		<div class="bg">
			<div class="user flex">
				<div class="l flex">
					<div class="icon"></div>
					<div class="name">{{userInfo.name}}</div>
				</div>
			</div>
		</div>
		<div class="card" @click="jump">
			<div class="title flex">
				<span class="text">今日用量统计</span>
				<span class="time">更新于：{{$u.timeFormat(now, "yyyy-mm-dd hh:MM")}}</span>
			</div>
			<div class="dosage flex">
				<div class="left flex">
					<div class="monitor"></div>
					<div>
						<div class="row row-a flex">
							<span class="text-1">监测用量</span>
							<span class="text-2">{{usage.subject_limit}}条</span>
						</div>
						<div class="row row-b flex">
							<span class="text-3">已用</span>
							<span class="text-4 color-1 mr-20">{{usage.subject_used}}</span>
							<span class="text-3">剩余</span>
							<span class="text-4">{{usage.subject_limit - usage.subject_used}}</span>
						</div>
					</div>
				</div>
				<u-circle-progress active-color="#1E62FC" duration="200" :percent="usage.subject_percent" width="140">
					<div class="u-progress-content">
						<text class="u-progress-info">{{usage.subject_percent}}%</text>
					</div>
				</u-circle-progress>
			</div>
			<div class="dosage flex">
				<div class="left flex">
					<div class="warn"></div>
					<div>
						<div class="row row-a flex">
							<span class="text-1">监测用量</span>
							<span class="text-2">{{usage.warn_limit}}条</span>
						</div>
						<div class="row row-b flex">
							<span class="text-3">已用</span>
							<span class="text-4 color-2 mr-20">{{usage.warn_used}}</span>
							<span class="text-3">剩余</span>
							<span class="text-4">{{usage.warn_limit - usage.warn_used}}</span>
						</div>
					</div>
				</div>
				<u-circle-progress active-color="#E65441" duration="200" :percent="usage.warn_percent" width="140">
					<div class="u-progress-content">
						<text class="u-progress-info">{{usage.warn_percent}}%</text>
					</div>
				</u-circle-progress>
			</div>
		</div>
		<div class="enter flex" @click="jump">
			<div class="left flex">
				<u-icon name="list-dot" color="#666" size="56" style="margin-right: 20rpx;"></u-icon>
				用量统计
			</div>
			<u-icon name="arrow-right" color="#666" size="28"></u-icon>
		</div>
		
		<div class="btns">
			<u-button size="default" type="primary" :hair-line="false" class="btn link-account" @click="switchAccount" v-if="!!accounts.length">切换账号</u-button>
			<u-button size="default" type="info" class="btn logout" @click="isLogoutModal=true">退出登录</u-button>
		</div>
		<u-toast ref="uToast" />
		<u-modal v-model="isLogoutModal" @confirm="logout" ref="uModal" :show-cancel-button="true" content="是否退出登录？"></u-modal>
	</z-paging>
</template>

<script>
import { userLogout, userStatistics, linkAccount, observeAccount, getUserInfo } from "@/api/user.js";
export default {
	data() {
		return {
			userInfo: uni.getStorageSync("userInfo"),
			now: new Date().getTime(),
			accounts: [],
			usage: {
				subject_limit: 0,
				subject_used: 0,
				warn_limit: 0,
				warn_used: 0,
				words_limit: 0,
				words_used: 0,
				subject_percent: 0,
				warn_percent: 0,
			},
			isAccountModal: false,
			isLogoutModal: false
		}
	},
	created() {
		if(!uni.getStorageSync("usage")){
			this.getData();
			this.getAccounts();
		}else{
			this.usage = uni.getStorageSync("usage");
			this.usage.subject_percent = ((this.usage.subject_used/this.usage.subject_limit)*100).toFixed(2)/1;
			this.usage.warn_percent = ((this.usage.warn_used/this.usage.warn_limit)*100).toFixed(2)/1;
		}
		if(!uni.getStorageSync("accounts")){
			this.getAccounts();
		}else{
			let data = uni.getStorageSync("accounts");
			if(!!data.list){
				this.accounts = data.list;
			};
		}
	},
	methods: {
		getData() {
			userStatistics().then(({code, data})=>{
				this.$refs.paging.endRefresh();
				if(code == 200){
					this.usage = data;
					uni.setStorageSync("usage", data);
					this.usage.subject_percent = ((data.subject_used/data.subject_limit)*100).toFixed(2)/1;
					this.usage.warn_percent = ((data.warn_used/data.warn_limit)*100).toFixed(2)/1;
				}
			});
		},
		getAccounts() {
			linkAccount().then(({data})=>{
				if(data.list){
					uni.setStorageSync("accounts", data);
					this.accounts = data.list;
				}
			});
		},
		jump() {
			this.$u.route("/pages/dosage/dosage");
		},
		logout() {
			uni.showLoading({title: "退出登录"});
			userLogout().then(({code})=>{
				uni.hideLoading();
				if(code == 200){
					uni.onSocketOpen(()=>{
						uni.closeSocket();
					});
					this.$store.state.isLogin = false;
					this.$refs.uToast.show({
						title: "退出登录成功",
						type: "success",
						callback: ()=>{
							this.$clearStorage();
							uni.reLaunch({
								url: "/pages/login/login", 
							});
						}
					});
				}
			});
		},
		switchAccount() {
			uni.navigateTo({
				url: "/pages/linkAccount/linkAccount"
			});
		},
	}
}
</script>

<style lang="scss" scoped>
.bg{
	height: 360rpx;
	background-color: #1E62FC;
	border-bottom-left-radius: 100rpx;
	border-bottom-right-radius: 100rpx;
	overflow: hidden;
	.user{
		margin-left: 40rpx;
		margin-top: 130rpx;
		align-items: center;
		justify-content: space-between;
		.l{
			align-items: center;
		}
	}
	.icon{
		width: 100rpx;
		height: 100rpx;
		background: url(./../../static/user.png) no-repeat center/contain;
		margin-right: 20rpx;
	}
	.name{
		font-size: 42rpx;
		line-height: 1;
		font-weight: bold;
		color: #fff;
	}
}
.card{
	background-color: #fff;
	width: 690rpx;
	margin: auto;
	margin-top: -80rpx;
	padding: 30rpx 20rpx;
	border: 1rpx solid #eee;
	border-radius: 10rpx;
	box-sizing: border-box;
	.title{
		justify-content: space-between;
		align-items: center;
		.text{
			font-weight: bold;
			font-size: 32rpx;
		}
		.time{
			font-size: 24rpx;
		}
	}
	.dosage{
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;
	}
	.monitor{
		width: 100rpx;
		height: 100rpx;
		background: #EDF3FD url(./../../static/monitor.png) no-repeat center/50rpx 50rpx;
		border-radius: 15rpx;
		margin-right: 20rpx;
	}
	.warn{
		width: 100rpx;
		height: 100rpx;
		background: #FCEDEC url(./../../static/warn.png) no-repeat center/50rpx 50rpx;
		border-radius: 15rpx;
		margin-right: 20rpx;
	}
	.color-1{
		color: #1E62FC;
	}
	.color-2{
		color: #E65441;
	}
	.text-1{
		font-size: 36rpx;
		margin-right: 10rpx;
		line-height: 36rpx;
	}
	.text-2{
		font-size: 30rpx;
		color: #666;
		line-height: 36rpx;
	}
	.text-3{
		font-size: 26rpx;
		line-height: 32rpx;
		color: #999;
		margin-right: 10rpx;
	}
	.text-4{
		font-size: 30rpx;
		line-height: 32rpx;
		font-weight: bold;
	}
	.row-a{
		margin-top: 8rpx;
	}
	.row-b{
		margin-top: 20rpx;
	}
	.mr-20{
		margin-right: 20rpx;
	}
}
.enter{
	width: 690rpx;
	margin: auto;
	margin-top: 40rpx;
	padding: 20rpx 0;
	justify-content: space-between;
	align-items: center;
	
	.left{
		font-size: 36rpx;
		line-height: 38rpx;
		align-items: center;
	}
}
.btns{
	margin-top: 160rpx;
}
.btn{
	width: 690rpx;
	margin: auto;
	margin-bottom: 30rpx;
}
.account-list{
	width: 80%;
	margin: 40rpx auto;
}
</style>
